<template>
    
  <div class="detail">
 <div class="img-wrap">
  <img :src="goods.img" />
  <div >{{ goods.goodId }}</div>

 </div>
 <div class="name">
  <div>
商品名称:
<span class="price">{{ goods.name }}</span>
  </div>
  <div>
  总价为:
  <span class="price">{{ goods.price }}元</span>
  </div>

  </div>
  <div  class="detail">
  <p>商品详情: </p>    
 {{ goods.desc }}
  </div>
  <div class="divbutton">
    <van-button color="linear-gradient(to right,#ff6034,#ee0a24)" @click="addToCart()">添加进购物车</van-button>
  </div>
  </div>
</template>

<script>
import { getCurrentInstance,reactive,toRefs } from 'vue';
import router from '../router/index';
import {useRoute} from'vue-router'

export default {
setup() {
  const {proxy}=getCurrentInstance()

  const state = reactive({
    goods:''
  })
 let route = useRoute();
 let goods = route.query;
 let data = goods
 const getDetail = () => {
  proxy.$axios.post('/detail',data).then(res => {
    state.goods = res;
  })
 }
getDetail();
const addToCart = () => {
  router.push({path:'Cart',query: state.goods})
}
return{
getDetail,
...toRefs(state),
addToCart
};
},
}

</script>


<style scoped>
.img-wrap{
width: 100%;
height: 18.75rem;
}

.img-wrap img{
width: 100%;
height: 100%;

}

.name {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 10px 10px;
font-size: 20px;
}
.name .title,
.name .price {
color: red;
font-size: 1.5rem;
font-weight: bold;
}

.detail {
padding: 0.625rem 0.625rem;
font-size: 1rem;
line-height: 2rem;
}

.detail p {
font-size: 1.125rem;
font-weight: bold;
}

.divbutton {
display: flex;
justify-content: center;
align-items: center;
}

</style>